<template>
<view>
	<view class="zb-nav" >
		<view class="zb">
			<block v-for="(tab, index) in live" :key="index" :class="{ activite: liveIndex == index }" @click="live(index)">{{ tab }}</block>
		</view>
		<image src="/static/index/search.png" style="width: 38rpx;height: 43rpx;margin-right: 30rpx;margin-left: auto;" mode="aspectFit"></image>
	</view>
	<view class="swiper">
		<swiper class="swiper" :current="1" :circular="true" :vertical="true"
		@change="changefun" @animationfinish="animationfinishfun" >
			<swiper-item v-for="(item,index) in PayVideo" :key="index">
				<view class="swiper-item">
					<video class="video" :id="'id'+index" loop="true" autoplay 
					:src="item.video_path" :custom-cache="false" :controls="false" 
					:enable-play-gesture="true" :enable-progress-gesture="true" 
					:show-center-play-btn="false" ></video>
				</view>
			</swiper-item>
		</swiper>
	</view>
	<view v-if="is_active">
		<view class="left">
			<cover-view class="left_box">
				<cover-view class="ke">
					<cover-image src="@/static/video/gg.png" mode=""></cover-image>
					<navigator url="../shequ/shequ">
						<cover-view>我讲的ps基础课程</cover-view>
					</navigator>
				</cover-view>
			    <cover-view>{{PayVideo[index_].title}}</cover-view>
			</cover-view>
		</view>
		<view class="right">
			<cover-view class="right_box">
				<cover-view class="top1">
					<cover-image class="avatar_img" src="http://git.ruan.work/uploads/-/system/user/avatar/12/avatar.png" mode="aspectFill"></cover-image>
					<cover-image class="add_img" src="@/static/index/guanzhu.png" mode="aspectFill"></cover-image>
				</cover-view>
				<cover-view @click="like_change(item)" class="top2">
					<cover-image v-if="!PayVideo[index_].like" class="t_img" 
					src="@/static/index/zan.png" mode="aspectFill"></cover-image>
					<cover-image v-else class="t_img" 
					src="@/static/index/zan-on.png" mode="aspectFill"></cover-image>
					<cover-view class="font_t">{{PayVideo[index_].like_num}}</cover-view>
				</cover-view>
				<cover-view class="top2">
					<cover-image class="t_img" src="@/static/index/pinglun.png" mode="aspectFill"></cover-image>
					<cover-view class="font_t">0</cover-view>
				</cover-view>
				<cover-view class="top2">
					<cover-image class="t_img" src="@/static/index/share2.png" mode="aspectFill" style="width: 54rpx;height: 54rpx;" @click="open"></cover-image>
					<cover-view class="font_t">0</cover-view>
				</cover-view>
			</cover-view>
		</view>
	</view>
	<!-- 分享弹框 -->
	<uni-popup ref="popup" type="bottom" :maskClick="false" class="popup">
		<view style="background-color: #1B1B1B;">
			<view style="display: flex;flex-direction: row;">
				<view style="color: #FFFFFF;margin-left: 36rpx;padding-top: 36rpx;font-size: 28rpx;">分享到</view>
				<uni-icons type="closeempty" color="white" size="22" @click="close" style="padding-top: 36rpx;margin-right: 39rpx;margin-left: auto;"></uni-icons>
			</view>
			<view class="share">				
              <view class="item">
				<image src="../../static/video/pengyouquan.png" style="width: 84rpx;height: 84rpx;"></image>
				<text>朋友圈</text>
			  </view>
			  <view class="item" @tap="share">
				<image src="../../static/video/wechat.png" style="width: 86rpx;height: 86rpx;"></image>
				<!-- <button open-type="share" @click="share">微信好友</button> -->
				<text>微信好友</text>
			  </view>
			  <view class="item">
				<image src="../../static/video/qq.png" style="width: 86rpx;height: 86rpx;"></image>
				<text>QQ好友</text>
			  </view>
			  <view class="item">
				<image src="../../static/video/copy.png" style="width: 64rpx;height: 64rpx;"></image>
				<text>复制链接</text>
			  </view>
			  <view class="item">
				<image src="../../static/video/collection.png" style="width: 61rpx;height: 59rpx;"></image>
				<text>收藏</text>  
			  </view>
			  <view class="item">
				<image src="../../static/video/upload.png" style="width: 61rpx;height: 61rpx;"></image>
				<text>下载</text>
			  </view>
			</view>
		</view>
	</uni-popup>
</view>
</template>

<script>
    import {Storage} from '@/static/libs/utils.js'
export default {
	data() {
		return {
			live: ['关注', '推荐'],
			PayVideo:[],//视频数组
			liveIndex: 0,
			data: [
				{ "video_path": 'https://v-cdn.zjol.com.cn/280443.mp4',
				  "like": false, "like_num": 0 },
				{ "video_path": 'https://v-cdn.zjol.com.cn/276982.mp4',
				  "like": false, "like_num": 1 },
				{ "video_path": 'https://v-cdn.zjol.com.cn/276986.mp4',
				  "like": false, "like_num": 2 }, 
				{ "video_path": 'https://v-cdn.zjol.com.cn/276984.mp4',
				  "like": false, "like_num": 3 }, 
				{ "video_path": 'https://v-cdn.zjol.com.cn/276985.mp4',
				  "like": false, "like_num": 4 }
			],
			index_: 1,
			index: '1',
			is_active: true,
			active: 2,
			arr: [],
			len: 0
		}
	},
	onShow() {
	
	},
	onLoad() {
		this.getVideoList()
		this.token = Storage.get('token')
	},
	methods: {
		share(){
			console.log('分享11111111111')
			uni.share({
				provider:"weixin",
				scene:"WXSceneSession",
				type:4,
				summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
				success:(res) => {
					// console.log("success:"+JSON.stringify(res))
				},
				fail:(res) => {
					// console.log("fail:"+JSON.stringify(err))
				}
			})
		},
		open(){
			this.$refs.popup.open('bottom')
		},
		close(){    
			this.$refs.popup.close()
		},
		//获取视频 
		getVideoList(){ 
			this.$request.get("https://sxk.scztf.com/dsp_go/public/index.php/video/data",
			{ 
				//type:'user',
				page:1,
				token:this.token
			}).then(res=>{
				console.log('视频列表',res)
				let videoData = res.data.data
				let videoList = []
                videoData.map(v=>{
					var obj = {
						title:v.title,
						video_path:v.url,
						"like": false,
						like_num:v.skr_count						
					}
					videoList.push(obj)
				})		
			  this.data = videoList
			})
		},
		//点赞视频
		like_change() {
			let obj = this.PayVideo[this.index_]
			obj.like = !obj.like
			obj.like == true ? obj.like_num=parseInt(obj.like_num) + 1 : obj.like_num=parseInt(obj.like_num) - 1
			//console.log('视频id',this.PayVideo[this.index_].id)
			this.$request.get("http://sxk.scztf.com/dsp_go/public/index.php/skr/like",
			{ 
				token:this.token,
				vid: this.data[this.index_].id,
				type:1
			}).then(res=>{
				console.log(res)
			})
		},
		changefun(e) {
			this.is_active = false
			let current = e.detail.current
			let { len, PayVideo, active,
				_arr, t, index_ } = this
			let videoContext = uni.createVideoContext('id' + index_)
			videoContext.pause()
			this.PayVideo = PayVideo
		},
		animationfinishfun(e) {
			let { index_, len, PayVideo,
				active, _arr, t } = this
			let current = e.detail.current
			this.is_active = true
			PayVideo[current]['istrue'] = true
			this.PayVideo = PayVideo
			let videoContext = uni.createVideoContext('id' + index_)
			videoContext.pause()
			videoContext = uni.createVideoContext('id' + current)
			videoContext.play()
			this.index_ = current
			if (PayVideo.length == len) {
				return
			}
			this.PayVideo.push(_arr[active])
			this.active += 1
		}
	},
	mounted() {
		this.getVideoList();
		uni.setStorageSync('video', this.data);
		let ind = 1
		this.index = ind
		const video = uni.getStorageSync('video');
		const len = video.length
		let b_arr = []
		let s_arr = []
		video.forEach((res, index) => {
			if (ind <= index) {
				b_arr.push(res)
			} else {
				s_arr.push(res)
			}
		})
		let _arr = b_arr.concat(s_arr.reverse())
		_arr = _arr.map(res => {
			res['istrue'] = false
			return res
		})
		_arr[0]['istrue'] = true
		const PayVideo = _arr
		this.PayVideo = PayVideo
		this._arr = _arr
		this.len = len
		this.$nextTick(function() {
			let videoContext = uni.createVideoContext('id1')
			videoContext.play()
		})
	}
}
</script>

<style scoped lang="less">
page{ font-family: PingFang SC; }
.share {
	display: flex;
	flex-direction: row;
	margin-top: 68rpx;
	align-items: flex-end;
	margin-left: 40rpx;
	width: 670rpx;
	justify-content: space-between;
}
.item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text {
		color: #FFFFFF;
		font-size: 22rpx;
		line-height: 50rpx;
	}
}
.popup {
	width: 100%;
	height: 345rpx;
	background-color: #1B1B1B;
	border-radius: 1rpx;
}
.share {
	height: 100%;
	// background-color: #1B1B1B;
}
.zb-nav {
	width: 100%;
	height: 100rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	background-color: #d8e4e0;
}
.zb {
	font-size: 32rpx;
	font-weight: bold;
	margin-left: 37%;
}
.swiper {
    height: 100vh;
	.swiper-item {
		position: relative;
		height: 100vh;
		background-color: #000000;
	}
}
.video {
	position: relative;
	width: 100%;
	height: 100vh;
}
.left_box {
	position: fixed;
	bottom: 60rpx;
	left: 30rpx;
	width: 516rpx;
	color: #FFFFFF;
	.ke {
		display: flex;
		align-items: center;
		cover-view { font-size: 26rpx; }
		cover-image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 15rpx;
		}
	}
	.ren {
		font-size: 36rpx;
		font-weight: bold;
		margin: 20rpx 0;
	}
	.ke_context {
		font-size: 30rpx;
		word-break: break-all;
		word-wrap: break-word;
		white-space: pre-line;
		white-space: normal;
	}
	.auto {
		display: flex;
		align-items: center;
		margin-top: 24rpx;
		cover-view { font-size: 26rpx; }
		cover-image {
			width: 26rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}
	}
}
.right_box {
	width: 100rpx;
	position: absolute;
	bottom: 60rpx;
	right: 12rpx;
	display: flex;
	flex-direction: column;
	color: #FFFFFF;
	.top1 {
		.avatar_img {
			width: 88rpx;
			height: 88rpx;
			border: 3px solid #FFFFFF;
			border-radius: 50%;
		}
		.add_img {
			width: 57rpx;
			height: 31rpx;
			margin: -20rpx auto 0;
		}
	}
	.top2 {
		text-align: center;
		margin-top: 37rpx;
		.t_img {
			height: 72rpx;
			width: 72rpx;
			margin: 0 auto 10rpx;
		}
		.font_t { font-size: 26rpx; }
	}
}
</style>
 